<div class="middle surface-shaded" ng-show="buildConfig">
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <h1>
            Edit Build Config {{buildConfig.metadata.name}}
            <small>&mdash; {{strategyType | startCase}} Build Strategy</small>
          </h1>
          <fieldset ng-disabled="disableInputs">
            <form class="edit-form" name="form" novalidate ng-submit="save()">
              <div ng-if="buildConfig.spec.source.type !== 'None'" class="section">
                <h3>Source Configuration</h3>
                <dl class="dl-horizontal left">
                  <div ng-if="sources.git">
                    <div class="row">
                      <div ng-class="{
                        'col-lg-8': view.advancedOptions,
                        'col-lg-12': !view.advancedOptions}">
                        <div class="form-group">
                          <label for="sourceUrl" class="required">Git Repository URL</label>
                          <div ng-class="{
                            'has-warning': form.sourceUrl.$touched && !sourceURLPattern.test(updatedBuildConfig.spec.source.git.uri),
                            'has-error': form.sourceUrl.$touched && form.sourceUrl.$error.required
                          }">
                            <!-- Unfortunately, we can't set type="url" because some valid values don't pass browser validation. -->
                            <input class="form-control"
                              id="sourceUrl"
                              name="sourceUrl"
                              ng-model="updatedBuildConfig.spec.source.git.uri"
                              type="text"
                              autocorrect="off"
                              autocapitalize="none"
                              spellcheck="false"
                              aria-describedby="source-url-help"
                              required>
                          </div>
                          <div class="help-block" id="source-url-help">
                            Git URL of the source code to build.
                            <span ng-if="!view.advancedOptions">If your Git repository is private, view the <a href="" ng-click="view.advancedOptions = true">advanced options</a> to set up authentication.</span>
                          </div>
                          <div class="has-error" ng-if="form.sourceUrl.$touched && form.sourceUrl.$error.required">
                            <span class="help-block">A Git repository URL is required.</span>
                          </div>
                          <div class="has-warning" ng-if="updatedBuildConfig.spec.source.git.uri && form.sourceUrl.$touched && !sourceURLPattern.test(updatedBuildConfig.spec.source.git.uri)">
                            <span class="help-block">This might not be a valid Git URL. Check that it is the correct URL to a remote Git repository.</span>
                          </div>
                        </div>

                      </div>
                      <div class="col-lg-4" ng-if="view.advancedOptions">
                        <div class="form-group editor">
                          <label for="sourceRef">Git Reference</label>
                          <div>
                            <input class="form-control"
                              id="sourceRef"
                              name="sourceRef"
                              type="text"
                              ng-model="updatedBuildConfig.spec.source.git.ref"
                              placeholder="master"
                              autocorrect="off"
                              autocapitalize="none"
                              spellcheck="false"
                              aria-describedby="source-ref-help">
                          </div>
                          <div class="help-block" id="source-ref-help">Optional branch, tag, or commit.</div>
                        </div>
                      </div>
                    </div>

                    <div ng-if="view.advancedOptions">
                      <div class="form-group">
                        <label for="sourceContextDir">Context Dir</label>
                        <div>
                          <input class="form-control"
                            id="sourceContextDir"
                            name="sourceContextDir"
                            type="text"
                            ng-model="updatedBuildConfig.spec.source.contextDir"
                            placeholder="/"
                            autocorrect="off"
                            autocapitalize="none"
                            spellcheck="false"
                            aria-describedby="context-dir-help">
                        </div>
                        <div class="help-block" id="context-dir-help">Optional subdirectory for the application source code, used as the context directory for the build.</div>
                      </div>
                      <div class="form-group">
                        <osc-secrets model="secrets.picked.gitSecret"
                                    namespace="projectName"
                                    display-type="source"
                                    type="source"
                                    service-account-to-link="builder"
                                    secrets-by-type="secrets.secretsByType"
                                    alerts="alerts">
                        </osc-secrets>
                      </div>
                    </div>
                  </div>

                  <div ng-if="sources.dockerfile">
                    <div class="form-group">
                    <label for="buildFrom">Dockerfile</label>
                      <div ui-ace="{
                        mode: 'dockerfile',
                        theme: 'dreamweaver',
                        rendererOptions: {
                          fadeFoldWidgets: true,
                          showPrintMargin: false
                        }
                      }" ng-model="updatedBuildConfig.spec.source.dockerfile" class="ace-bordered ace-inline dockerfile-mode"></div>
                    </div>

                    <div class="form-group" ng-if="updatedBuildConfig.spec.strategy.dockerStrategy.dockerfilePath && view.advancedOptions">
                      <label for="dockerfilePath">Dockerfile Path</label>
                      <div>
                        <input class="form-control"
                          id="dockerfilePath"
                          name="dockerfilePath"
                          type="text"
                          ng-model="updatedBuildConfig.spec.strategy.dockerStrategy.dockerfilePath"
                          autocorrect="off"
                          autocapitalize="none"
                          spellcheck="false">
                      </div>
                    </div>
                  </div>

                  <div class="form-group" ng-if="strategyType === 'Docker' && view.advancedOptions">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" ng-model="options.noCache">
                        Execute docker build without reusing cached instructions.
                        <span class="help action-inline">
                          <a href="">
                            <i class="pficon pficon-help" data-toggle="tooltip" aria-hidden="true" data-original-title="Will run the docker build with '--no-cache=true' flag">
                            </i>
                          </a>
                        </span>
                      </label>
                    </div>
                  </div>

                  <div class="form-groups" ng-show="sources.images">
                    <div class="single-image-source" ng-if="sourceImages.length === 1">

                      <div class="form-group">
                        <label>Image Source From</label>
                        <ui-select required ng-model="imageOptions.fromSource.type" search-enabled="false">
                          <ui-select-match>{{$select.selected | startCase}}</ui-select-match>
                          <ui-select-choices repeat="type in imageSourceTypes">
                            {{type | startCase}}
                          </ui-select-choices>
                        </ui-select>
                      </div>

                      <div class="form-group" ng-if="imageOptions.fromSource.type==='ImageStreamTag'" >
                        <istag-select include-shared-namespace="true"
                                      select-required="true"
                                      model="imageOptions.fromSource.imageStreamTag"></istag-select>
                      </div>

                      <div ng-if="imageOptions.fromSource.type==='ImageStreamImage'" class="form-group">
                        <label for="imageSourceImage">Image Stream Image</label>
                        <div>
                          <input class="form-control"
                            type="text"
                            ng-model="imageOptions.fromSource.imageStreamImage"
                            placeholder="example: openshift/ruby-20-centos7@603bfa418"
                            autocorrect="off"
                            autocapitalize="none"
                            spellcheck="false"
                            required>
                        </div>
                      </div>


                      <div ng-if="imageOptions.fromSource.type==='DockerImage'" class="form-group">
                        <label for="imageSourceLink">Docker Image Repository</label>
                        <div>
                          <input class="form-control"
                            id="imageSourceLink"
                            name="imageSourceLink"
                            type="text"
                            ng-model="imageOptions.fromSource.dockerImage"
                            placeholder="example: centos/ruby-20-centos7:latest"
                            autocorrect="off"
                            autocapitalize="none"
                            spellcheck="false"
                            required>
                        </div>
                      </div>

                      <div class="form-group">
                        <label for="buildFrom">Source and Destination Paths<span class="help action-inline">
                          <a href="">
                          <i class="pficon pficon-help" data-toggle="tooltip" aria-hidden="true" data-original-title="Paths is a list of source and destination paths to copy from the image. At least one pair has to be specified."></i>
                          </a>
                        </span></label>
                        <key-value-editor
                          entries="imageSourcePaths"
                          key-placeholder="Source Path"
                          key-validator="\/.*?$"
                          value-placeholder="Destination Dir"
                          key-validator-error-tooltip="A valid Source Path is an absolute path beginning with '/'"
                          add-row-link="Add image source path"></key-value-editor>
                      </div>
                    </div>


                    <div class="multiple-image-source" ng-if="sourceImages.length !== 1">
                      <label for="imageSourceFrom">Image Source From<span class="help action-inline">
                        <a href="">
                          <i class="pficon pficon-info" style="cursor: help;" aria-hidden="true" data-toggle="tooltip" data-original-title="This Build Config contains more then one Image Source. To edit them use the YAML editor.">
                        </i>
                        </a>
                      </span></label>
                      <div ng-repeat="fromObject in imageSourceFromObjects" class="imageSourceItem">
                        {{selectTypes[fromObject.kind]}}: {{fromObject | imageObjectRef : buildConfig.metadata.namespace}}
                      </div>
                    </div>
                  </div>
                </dl>
                <div ng-if="!sources.git && !sources.dockerfile && !sources.images">
                  There are no editable source types for this build config.
                </div>
              </div>

              <div ng-if="updatedBuildConfig | isJenkinsPipelineStrategy" class="section">
                <h3 ng-class="{ 'with-divider': !sources.none }">Jenkins Pipeline Configuration</h3>
                <div class="form-group" ng-if="buildConfig.spec.source.type === 'Git'">
                  <label for="jenkinsfile-type">Jenkinsfile Type</label>
                  <ui-select search-enabled="false" ng-model="jenkinsfileOptions.type" input-id="jenkinsfile-type" aria-describedby="jenkinsfile-type-help">
                    <ui-select-match>{{$select.selected.title}}</ui-select-match>
                    <ui-select-choices repeat="type.id as type in jenkinsfileTypes">
                      {{type.title}}
                    </ui-select-choices>
                  </ui-select>
                  <div class="help-block" id="jenkinsfile-type-help">
                    Use a Jenkinsfile from the source repository or specify the
                    Jenkinsfile content directly in the build configuration.
                  </div>
                </div>

                <div ng-if="jenkinsfileOptions.type === 'path'" class="form-group">
                  <label for="jenkinsfilePath">Jenkinsfile Source Path</label>
                  <input class="form-control"
                         id="jenkinsfilePath"
                         name="jenkinsfilePath"
                         type="text"
                         ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath"
                         autocorrect="off"
                         autocapitalize="none"
                         spellcheck="false"
                         aria-describedby="jenkinsfile-path-help">
                  <div class="help-block" id="jenkinsfile-path-help">
                    Optional path to the Jenkinsfile relative to the context dir.
                    Defaults to the Jenkinsfile in context dir.
                  </div>
                </div>

                <div ng-if="jenkinsfileOptions.type === 'inline'">
                  <label>Jenkinsfile</label>
                  <div ui-ace="{
                    mode: 'groovy',
                    theme: 'eclipse',
                    rendererOptions: {
                      fadeFoldWidgets: true,
                      showPrintMargin: false
                    }
                  }" ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline"></div>
                </div>
                <div class="mar-top-md mar-bottom-md">
                  <a ng-if="!view.jenkinsfileExamples" href="" ng-click="view.jenkinsfileExamples = true">What's a Jenkinsfile?</a>
                </div>
                <div ng-if="view.jenkinsfileExamples" class="editor-examples">
                  <div class="pull-right mar-top-md">
                    <a href="" ng-click="view.jenkinsfileExamples = false">Hide examples</a>
                  </div>
                  <h4>Jenkinsfile Examples</h4>
                  <ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>
                </div>
              </div>
              <div ng-if="sources.none && !(updatedBuildConfig | isJenkinsPipelineStrategy)">
                <div class="form-group">
                  <i>No source inputs have been defined for this build configuration.</i>
                </div>
              </div>

              <div ng-if="strategyType !== 'JenkinsPipeline'" class="section">
                <h3 class="with-divider">Image Configuration</h3>
                <dl class="dl-horizontal left">

                  <div>
                    <div class="form-group">
                      <label for="buildFrom">Build From</label>
                      <ui-select required ng-model="imageOptions.from.type" search-enabled="false">
                        <ui-select-match>{{$select.selected | startCase}}</ui-select-match>
                        <ui-select-choices repeat="type in buildFromTypes">
                          {{type | startCase}}
                        </ui-select-choices>
                      </ui-select>
                    </div>


                    <div class="form-group" ng-if="imageOptions.from.type==='ImageStreamTag'">
                      <istag-select include-shared-namespace="true"
                                    select-required="true"
                                    model="imageOptions.from.imageStreamTag"></istag-select>
                    </div>

                    <div ng-if="imageOptions.from.type==='DockerImage'" class="form-group">
                      <label for="FromTypeLink">Docker Image Repository</label>
                      <div>
                        <input class="form-control"
                          type="text"
                          ng-model="imageOptions.from.dockerImage"
                          autocorrect="off"
                          autocapitalize="none"
                          placeholder="example: centos/ruby-20-centos7:latest"
                          spellcheck="false"
                          required>
                      </div>
                    </div>

                    <div ng-if="imageOptions.from.type==='ImageStreamImage'" class="form-group">
                      <label for="FromTypeImage">Image Stream Image</label>
                      <div>
                        <input class="form-control"
                          type="text"
                          ng-model="imageOptions.from.imageStreamImage"
                          placeholder="example: openshift/ruby-20-centos7@603bfa418"
                          autocorrect="off"
                          autocapitalize="none"
                          spellcheck="false"
                          required>
                      </div>
                    </div>
                  </div>

                  <!-- Wait for project to load since the directive uses `canI` checks that need it. -->
                  <div class="form-group" ng-if="project && strategyType !== 'JenkinsPipeline'">
                    <!-- Use ng-show instead of ng-if when checking `view.advancedOptions` so
                         the form is still marked invalid if a hidden field has errors. -->
                    <div ng-show="view.advancedOptions">
                      <osc-secrets model="secrets.picked.pullSecret"
                                  namespace="projectName"
                                  display-type="pull"
                                  type="image"
                                  secrets-by-type="secrets.secretsByType"
                                  service-account-to-link="builder"
                                  alerts="alerts">
                      </osc-secrets>
                    </div>
                  </div>

                  <div class="form-group" ng-if="view.advancedOptions">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" ng-model="options.forcePull">
                        Always pull the builder image from the docker registry, even if it is present locally
                      </label>
                    </div>
                  </div>

                  <div>
                    <div class="form-group">
                      <label for="buildFrom">Push To</label>
                      <ui-select required ng-model="imageOptions.to.type" search-enabled="false">
                        <ui-select-match>{{$select.selected | startCase}}</ui-select-match>
                        <ui-select-choices repeat="type in pushToTypes">
                          {{type | startCase}}
                        </ui-select-choices>
                      </ui-select>
                    </div>
                    <div class="form-group" ng-if="imageOptions.to.type==='ImageStreamTag'">
                      <istag-select model="imageOptions.to.imageStreamTag"
                                    select-required="true"
                                    allow-custom-tag="true"></istag-select>
                    </div>

                    <div ng-if="imageOptions.to.type==='DockerImage'" class="form-group">
                      <label for="pushToLink">Docker Image Repository</label>
                      <div>
                        <input class="form-control"
                          id="pushToLink"
                          name="pushToLink"
                          type="text"
                          ng-model="imageOptions.to.dockerImage"
                          placeholder="example: centos/ruby-20-centos7:latest"
                          autocorrect="off"
                          autocapitalize="none"
                          spellcheck="false"
                          required>
                      </div>
                    </div>

                    <!-- Wait for project to load since the directive uses `canI` checks that need it. -->
                    <div ng-if="project">
                      <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                      <div class="form-group" ng-show="view.advancedOptions">
                        <osc-secrets model="secrets.picked.pushSecret"
                                    namespace="projectName"
                                    display-type="push"
                                    type="image"
                                    disable-input="imageOptions.to.type==='None'"
                                    service-account-to-link="builder"
                                    secrets-by-type="secrets.secretsByType"
                                    alerts="alerts">
                        </osc-secrets>
                      </div>
                    </div>
                  </div>
                </dl>
              </div>

              <div ng-if="!(updatedBuildConfig | isJenkinsPipelineStrategy)" class="section">
                <h3 class="with-divider">Environment Variables<span class="help action-inline">
                  <a href="">
                  <i class="pficon pficon-help" data-toggle="tooltip" aria-hidden="true" data-original-title="Environment variables are used to configure and pass information to running containers.  These environment variables will be available during your build and at runtime."></i>
                  </a>
                </span></h3>
                <div>
                  <key-value-editor
                    ng-if="envVars"
                    entries="envVars"
                    value-from-selector-options="valueFromObjects"
                    key-validator="[a-zA-Z_][a-zA-Z0-9_]*"
                    key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
                    add-row-link="Add Value"
                    add-row-with-selectors-link="Add Value from Config Map or Secret"></key-value-editor>
                </div>
              </div>
              <div ng-if="sources.git || !(updatedBuildConfig | isJenkinsPipelineStrategy)" class="section">
                <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                <div ng-show="view.advancedOptions">
                  <h3 class="with-divider">Triggers
                    <a ng-href="{{'build-triggers' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                  </h3>
                  <dl class="dl-horizontal left">
                    <div>

                      <div ng-if="sources.git">
                        <edit-webhook-triggers
                          ng-if="triggers.githubWebhooks.length"
                          type="GitHub"
                          type-info="The GitHub source repository must be configured to use the webhook to trigger a build when source is committed."
                          triggers="triggers.githubWebhooks"
                          form="form"
                          bc-name="buildConfig.metadata.name"
                          project-name="project.metadata.name">
                        </edit-webhook-triggers>
                        <edit-webhook-triggers
                          ng-if="triggers.genericWebhooks.length"
                          type="Generic"
                          type-info="A generic webhook can be triggered by any system capable of making a web request."
                          triggers="triggers.genericWebhooks"
                          form="form"
                          bc-name="buildConfig.metadata.name"
                          project-name="project.metadata.name">
                        </edit-webhook-triggers>
                        <edit-webhook-triggers
                          ng-if="triggers.gitlabWebhooks.length"
                          type="GitLab"
                          type-info="The GitLab source repository must be configured to use the webhook to trigger a build when source is committed."
                          triggers="triggers.gitlabWebhooks"
                          form="form"
                          bc-name="buildConfig.metadata.name"
                          project-name="project.metadata.name">
                        </edit-webhook-triggers>
                        <edit-webhook-triggers
                          ng-if="triggers.bitbucketWebhooks.length"
                          type="Bitbucket"
                          type-info="The Bitbucket source repository must be configured to use the webhook to trigger a build when source is committed."
                          triggers="triggers.bitbucketWebhooks"
                          form="form"
                          bc-name="buildConfig.metadata.name"
                          project-name="project.metadata.name">
                        </edit-webhook-triggers>
                        <div class="add-webhook">
                          <h5>Add Webhook</h5>
                          <div class="trigger-info">
                            <span class="trigger-url">
                              <ui-select ng-model="createTriggerSelect.selectedType"
                                search-enabled="false"
                                title="Select a webhooke type"
                                class="select-webhook-type"
                                flex>
                                <ui-select-match placeholder="Select a webhook type">
                                  {{ $select.selected.label }}
                                </ui-select-match>
                                <ui-select-choices repeat="option.label as option in createTriggerSelect.options">
                                  {{ option.label }}
                                </ui-select-choices>
                              </ui-select>
                            </span>
                            <span class="visible-xs-inline trigger-actions">
                              <a href="" ng-class="{disabled: !createTriggerSelect.selectedType}" class="action-icon" ng-click="addWebhookTrigger(createTriggerSelect.selectedType)" role="button">
                                <span class="fa fa-plus" aria-hidden="true" title="Add"></span>
                                <span class="sr-only">Add</span>
                              </a>
                            </span>
                            <span class="hidden-xs trigger-actions">
                              <a href="" ng-class="{disabled: !createTriggerSelect.selectedType}" ng-click="addWebhookTrigger(createTriggerSelect.selectedType)" role="button">Add</a>
                            </span>
                          </div>
                        </div>
                      </div>

                      <!-- TODO: Uncomment once ConfigChange trigger will work. Based on https://github.com/openshift/origin-web-console/issues/321  -->
                      <!-- <h5>Config change</h5>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" ng-model="triggers.configChangeTrigger.present">
                            Automatically build a new image when the build configuration changes
                        </label>
                      </div> -->

                      <div ng-if="!(updatedBuildConfig | isJenkinsPipelineStrategy)">
                        <h5>Image change</h5>
                        <div class="checkbox">
                          <label>
                            <input type="checkbox" ng-model="triggers.builderImageChangeTrigger.present" ng-disabled="imageOptions.from.type === 'None'">
                              Automatically build a new image when the builder image changes
                              <span class="help action-inline">
                                <a href>
                                  <i class="pficon pficon-help" aria-hidden="true"
                                  data-toggle="tooltip" data-original-title="Automatically building a new image when the builder image changes allows your code to always run on the latest updates.">
                                </i>
                                </a>
                              </span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </dl>
                </div>
              </div>
              <!-- Wait for project to load since the directive uses `canI` checks that need it. -->
              <div class="section" ng-if="project && !(updatedBuildConfig | isJenkinsPipelineStrategy)">
                <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                <div ng-show="view.advancedOptions">
                  <h3 class="with-divider">
                    Build Secrets
                    <a href="{{'source_secrets' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                  </h3>
                  <div class="form-group">
                    <osc-source-secrets model="secrets.picked.sourceSecrets"
                                namespace="projectName"
                                secrets-by-type="secrets.secretsByType"
                                strategy-type="strategyType"
                                service-account-to-link="builder"
                                alerts="alerts"
                                display-type="source"
                                type="source">
                    </osc-source-secrets>
                  </div>
                </div>
              </div>
              <div class="section mar-bottom-lg" ng-if="view.advancedOptions">
                <h3 class="with-divider">Run Policy
                  <span class="help action-inline">
                    <a href="">
                      <i class="pficon pficon-help" data-toggle="tooltip" aria-hidden="true" data-original-title="The build run policy describes the order in which the builds created from the build configuration should run."></i>
                    </a>
                  </span>
                </h3>
                <div class="form-group">
                  <label class="sr-only">Run policy type</label>
                  <ui-select required ng-model="updatedBuildConfig.spec.runPolicy" search-enabled="false">
                    <ui-select-match>{{$select.selected | sentenceCase}}</ui-select-match>
                    <ui-select-choices repeat="type in runPolicyTypes">
                      {{type | sentenceCase}}
                    </ui-select-choices>
                  </ui-select>
                </div>

                <div ng-switch="updatedBuildConfig.spec.runPolicy">
                  <div class="help-block" ng-switch-when="Serial">Builds triggered from this Build Configuration will run one at the time, in the order they have been triggered.</div>
                  <div class="help-block" ng-switch-when="Parallel">Builds triggered from this Build Configuration will run all at the same time. The order in which they will finish is not guaranteed.</div>
                  <div class="help-block" ng-switch-when="SerialLatestOnly">Builds triggered from this Build Configuration will run one at the time. When a currently running build completes, the next build that will run is the latest build created. Other queued builds will be cancelled.</div>
                  <div class="help-block" ng-switch-default>Builds triggered from this Build Configuration will run using the {{updatedBuildConfig.spec.runPolicy | sentenceCase}} policy.</div>
                </div>
              </div>

              <div ng-if="!(updatedBuildConfig | isJenkinsPipelineStrategy)" class="section">
                <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                <div ng-show="view.advancedOptions">
                  <h3 class="with-divider">
                    Post-Commit Hooks
                    <span class="help action-inline">
                      <a href="{{'build-hooks' | helpLink}}" aria-hidden="true" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link"></i></span></a>
                    </span>
                  </h3>

                  <div class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="view.hasHooks" aria-describedby="build-hooks-help">
                      Run build hooks after image is built
                    </label>
                    <div class="help-block" id="build-hooks-help">
                      Build hooks allow you to run commands at the end of the build to verify the image.
                    </div>
                  </div>

                  <div ng-if="view.hasHooks">
                    <div class="form-group">
                      <label>Hook Types</label>
                      <ui-select
                         ng-model="buildHookSelection.type"
                         title="Choose a type of build hook">
                        <ui-select-match>{{$select.selected.label}}</ui-select-match>
                        <ui-select-choices repeat="type in buildHookTypes">
                          {{type.label}}
                        </ui-select-choices>
                      </ui-select>
                    </div>

                    <fieldset>
                      <div ng-if="buildHookSelection.type.id === 'script' || buildHookSelection.type.id === 'scriptArgs'">
                        <label class="required">Script</label>
                        <div
                          ui-ace="{
                            mode: 'sh',
                            theme: 'eclipse',
                            rendererOptions: {
                              fadeFoldWidgets: true,
                              showPrintMargin: false
                            }
                          }"
                          ng-model="updatedBuildConfig.spec.postCommit.script"
                          required
                          class="ace-bordered ace-inline">
                        </div>
                      </div>

                      <div ng-if="buildHookSelection.type.id === 'command' || buildHookSelection.type.id === 'commandArgs'">
                        <label class="required">Command</label>
                        <edit-command
                          args="updatedBuildConfig.spec.postCommit.command"
                          placeholder="Add to command"
                          is-required="true">
                        </edit-command>
                      </div>

                      <div ng-if="buildHookSelection.type.id === 'args' || buildHookSelection.type.id === 'commandArgs' || buildHookSelection.type.id === 'scriptArgs' "
                           ng-class="{ 'mar-top-lg': buildHookSelection.type.id === 'scriptArgs' }">
                        <label class="required">Arguments</label>
                        <edit-command
                          args="updatedBuildConfig.spec.postCommit.args"
                          type="arguments"
                          description="getArgumentsDescription()"
                          is-required="true">
                        </edit-command>
                      </div>
                    </fieldset>
                  </div>
                </div>
              </div>

              <div class="gutter-top">
                <a href="" ng-click="view.advancedOptions = !view.advancedOptions" role="button">{{view.advancedOptions ? 'Hide' : 'Show'}} advanced options</a>
              </div>
              <div class="buttons gutter-top-bottom">
                <button
                  type="submit"
                  class="btn btn-primary btn-lg"
                  ng-disabled="form.$invalid || form.$pristine || disableInputs">
                  Save
                </button>
                <button class="btn btn-default btn-lg" ng-click="cancel()">Cancel</button>
              </div>
           </form>
        </fieldset>
      </div>
    </div>
  </div>
</div>
</div>
